<template>
  <p-form-model :model="form" :rules="rules" layout="inline">
    <p-form-model-item label="BP名称">
      <span @click="searchBPModal">
        <p-input
          v-model="BP.name"
          placeholder="请单击选择BP名称"
          disabled
          style="pointer-events: none"
        />
      </span>
    </p-form-model-item>
    <p-form-model-item label="M+3名称">
      <span @click="searchM3Modal">
        <p-input
          v-model="M3.name"
          placeholder="请单击选择M+3名称"
          disabled
          style="pointer-events: none"
        />
      </span>
    </p-form-model-item>
    <p-button type="primary" class="btn-search" @click="handleSearch">
      搜索
    </p-button>
    <p-button @click="handleReset">重置</p-button>
    <DialogBPName
      ref="BP"
      :visible.sync="visibleModal"
      :reset="reset"
      @BPsearchName="obtainBPname"
    />

    <DialogM3Name
      ref="M3"
      :reset="reset"
      :visible.sync="visibleModalM3"
      @M3searchName="obtainM3name"
    />
  </p-form-model>
</template>
<script>
import DialogBPName from '@/components/dialog/DialogBPName.vue';
import DialogM3Name from '@/components/dialog/DialogM3Name.vue';

// import bus from '../../../../src/bus/bus.js';

const defaultForm = {
  name: '',
  state: '',
  node: '',
  salesOrganization: '',
};
export default {
  components: {
    DialogBPName,
    DialogM3Name,
  },
  data() {
    return {
      BP: { name: '', id: 0 },
      M3: { name: '', id: 0 },
      visibleModal: false,
      visibleModalM3: false,
      reset: false,
      col: 4,
      row: 1,
      gutter: 24,
    };
  },
  methods: {
    handleSearch() {
      console.log(this.BP.id, '1234');
      if (!this.BP.id && !this.M3.id) {
        this.$message.error('请选择BP或M3后搜索');
      } else {
        this.$emit('search', { bpId: this.BP.id, m3Id: this.M3.id });
      }
    },
    handleReset() {
      this.BP = { name: '', id: 0 };
      this.M3 = { name: '', id: 0 };
      this.$emit('resTable', false);
      this.reset = true;
    },
    searchBPModal() {
      this.visibleModal = true;
      this.reset = false;
    },
    searchM3Modal() {
      this.visibleModalM3 = true;
      this.reset = false;
    },
    obtainBPname(item) {
      this.BP = item;
      this;
    },
    obtainM3name(item) {
      this.M3 = item;
    },
  },
};
</script>

<style lang="less" scoped>
.poros-form {
  padding: 10px 20px;
  width: 100%;
  // border-bottom: 1px solid #e5e6e9;
}
.poros-form-item {
  width: 40%;
  margin-bottom: 0 !important;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 70px);
}
.btn-search {
  margin-right: 16px;
}
</style>
